<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07- 监视数据的变化：$watch</title>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="name">
    <h3>{{name}}</h3>
    <hr>

    <input type="text" v-model="age">
    <h3>{{age}}</h3>
    <hr>

    <input type="text" v-model="user.name">
    <h3>{{user.name}}</h3>

</div>
<script>
    let vm = new Vue({
        el: "#app",
        data() {
            return {
                name: 'ton',
                age: 12,
                user: {
                    id: 1001,
                    name: 'alice'
                }
            }
        },
        watch: {
            //方式2：使用vue实例提供的watch选项
            age: (newValue, oldValue) => {
                console.log('age 已经被修改, 原值: ' + oldValue + ' 新值为: ' + newValue)
            },
            user: {
                handler: (newValue, oldValue) => {
                    console.log('name 已经被修改, 原值 ' + oldValue.name + ' 新值为 ' + newValue.name)
                },
                deep: true,  // 深度监视，当对象中的属性发生变化时也会监视
            }
        }
    });


    //    方式1 ： 使用vue实例提供的$watch() 方法
    vm.$watch('name', (newValue, oldValue) => {
        console.log('name 已经被修改, 原值: ' + oldValue + '新值为: ' + newValue)
    })

</script>
</body>
</html>